<template>
  <Transition name="slide-down">
    <view class="refresh-container" v-if="isRefreshing" :class="{ error: error }">
      <!-- 加载动画 -->
      <view v-if="!error" class="loading-wrapper">
        <view class="loader" :class="{ rotating: isRefreshing }"></view>
        <text class="status-text">
          {{ isRefreshing ? '加载中...' : error ? '刷新失败' : '刷新成功' }}
        </text>
      </view>

      <!-- 错误提示 -->
      <view v-if="error" class="error-wrapper">
        <wd-icon name="warning" size="20" color="#ff4444" />
        <text class="error-text">{{ error }}</text>
      </view>

      <!-- 时间显示 -->
      <text v-if="!isRefreshing && !error" class="time-text">上次更新：{{ formattedTime }}</text>
    </view>
  </Transition>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { formatDate } from '@/utils/index'

const props = defineProps({
  isRefreshing: Boolean,
  error: String,
  lastRefreshTime: Date,
})

const formattedTime = computed(() =>
  props.lastRefreshTime ? formatDate(props.lastRefreshTime, 'HH:mm:ss') : '--',
)
</script>

<style lang="scss" scoped>
.refresh-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120rpx;
  transition: all 0.3s ease;

  &.error {
    height: 160rpx;
    background: #fff0f0;
  }
}

.loading-wrapper {
  display: flex;
  gap: 16rpx;
  align-items: center;
}

.loader {
  width: 36rpx;
  height: 36rpx;
  border: 4rpx solid #ddd;
  border-top-color: #007aff;
  border-radius: 50%;
  transition: transform 0.3s ease;

  &.rotating {
    animation: rotate 1s linear infinite;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.status-text {
  font-size: 28rpx;
  color: #666;
}

.error-wrapper {
  display: flex;
  gap: 12rpx;
  align-items: center;
  padding: 16rpx 24rpx;
  background: #ffe6e6;
  border-radius: 8rpx;
}

.error-text {
  font-size: 28rpx;
  color: #ff4444;
}

.time-text {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #999;
}
</style>
